<template>
  <div class="admin_page">
    <admin-side-bar></admin-side-bar>
    <admin-header></admin-header>
    <admin-container>
      <el-form inline size="mini" :model="form">
        <el-form-item>
          <el-input
            v-model="form.name"
            prefix-icon="el-icon-search"
            placeholder="姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            @click="
              () => {
                pageNum = 1;
                getData();
              }
            "
          >
            搜索
          </el-button>
          <el-button
            type="primary"
            @click="
              () => {
                $refs.add.show();
              }
            "
          >
            添加
          </el-button>
          <el-button type="danger" @click="del('all')">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="appLoading"
        border
        size="mini"
        :data="data.data"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="ID" prop="id" width="50px"></el-table-column>
        <el-table-column label="头像">
          <template slot-scope="{ row }">
            <el-image
              :src="row.ava"
              style="width: 50px;height: 50px"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="手机" prop="phone"></el-table-column>
        <el-table-column label="身份证" prop="idcard"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="排序" prop="sort"></el-table-column>
        <el-table-column label="上次登录时间"></el-table-column>
        <el-table-column label="角色">
          <template slot-scope="{ row }">
            <el-button
              size="mini"
              type="text"
              @click="() => $refs.role.show(row)"
            >
              {{ row.role_id ? row.role.name : "设置" }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="del(row)">
              删除
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="
                () => {
                  $refs.add.show(row);
                }
              "
            >
              修改
            </el-button>
            <el-button type="text" size="mini" @click="reset(row)"
              >重置密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="mt10 bg_fff">
        <el-pagination
          :total="page.count"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageChange"
        ></el-pagination>
      </div>
    </admin-container>
    <admin-add-dialog ref="add" @ok="refresh"></admin-add-dialog>
    <admin-role-dialog ref="role" @ok="refresh"></admin-role-dialog>
  </div>
</template>

<script>
import AdminSideBar from "../../../components/admin/side-bar";
import AdminHeader from "../../../components/admin/header";
import AdminContainer from "../../../components/admin/container";
import { AppLoadingMixin } from "../../../lib/mixins/app-loading";
import AdminAddDialog from "../../../components/admin/admin/add-dialog";
import AdminRoleDialog from "../../../components/admin/admin/role-dialog";

export default {
  name: "Admin",
  components: {
    AdminRoleDialog,
    AdminAddDialog,
    AdminContainer,
    AdminHeader,
    AdminSideBar
  },
  mixins: [AppLoadingMixin],
  data() {
    return {
      form: {},
      selection: [],
      data: {},
      pageNum: 1
    };
  },
  computed: {
    page() {
      const { data } = this;
      return {
        count: data.count || 0,
        pageNum: data.currentPage || 1,
        pageSize: data.pageSize || 10
      };
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    selectionChange(selection) {
      this.selection = selection;
    },
    pageChange(p) {
      this.pageNum = p;
      this.getData();
    },
    del(data) {
      const refresh = deleteCount => {
        if ((this.page.count - deleteCount) % this.page.pageSize === 0) {
          this.pageNum--;
        }
        this.getData();
      };
      if (data === "all") {
        if (!this.selection || !this.selection.length)
          return this.$message.error("请至少选择一项！");
        this.$confirm("是否删除所选？").then(async () => {
          if (await this.$adminService.del([...this.selection].map(r => r.id)))
            refresh(this.selection.length);
        });
      } else {
        this.$confirm(`是否删除${data.name}？`).then(async () => {
          if (await this.$adminService.del(data.id)) refresh(1);
        });
      }
    },
    reset(data) {
      this.$prompt("请输入密码", "重置密码", {
        inputPattern: /[\s\S]{6,}/,
        inputErrorMessage: "密码格式不正确"
      }).then(({ value }) => {
        this.$confirm(`是否将${data.name}的密码重置为${value}`).then(
          async () => {
            if (
              await this.$adminService.update({
                id: data.id,
                // eslint-disable-next-line no-undef
                pass: hex_md5(value)
              })
            ) {
              this.$message.success("重置密码成功");
              this.getData();
            }
          }
        );
      });
    },
    refresh() {
      this.pageNum = 1;
      this.form.name = "";
      this.getData();
    },
    async getData() {
      const { page, pageNum, form } = this;
      this.data = await this.$adminService.list({ ...form, ...page, pageNum });
    }
  }
};
</script>
